<template>
  <div class="role-permissions">
    <!-- 角色部分 -->
    <div class="role-manage">
      <div class="title">
        <span>角色名称</span>
        <el-button type="primary" size="small" @click="createRole"><i class="fa-plus"></i> 新建角色</el-button>
      </div>
      <div class="role-list">
        <el-scrollbar height="100%">
          <li v-for="item in roleList" :key="item.id" @click="clickItem(item)" :class="{'click-item':currentRoleId===item.id}">
            <span class="name">
              <TextOverflow :content="item.roleName"></TextOverflow>
            </span>
            <span class="oper">
            <i class="oper-icon modify-icon fa-pencil-square-o" @click.stop="modifyRole(item)"></i>
            <i class="oper-icon delete-icon fa-trash-o" @click.stop="deleteRole(item)"></i>
          </span>
          </li>
        </el-scrollbar>
      </div>
    </div>
    <!-- 权限部分 -->
    <div class="permissions">
      <div class="title">
        <span>
          <span>权限配置-当前角色：</span><span class="current-rolename">{{currentRoleName}}</span>
        </span>
        <el-button type="primary" size="small" @click="permissionSave">保 存</el-button>
      </div>
    </div>
  </div>
  <div class="role-dialog">
    <el-dialog 
      :width="330"
      :title="isAdd?'新建角色':'修改角色'" 
      v-model="showDialog" 
      :close-on-click-modal="false" 
      @closed="handleClose"
    >
      <el-form ref="ruleForm" :rules="rules" :model="roleForm">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input size="small" placeholder="请输入角色名称" v-model.sync.trim="roleForm.roleName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="showDialog=false">取 消</el-button>
          <el-button size="small" type="primary" @click="submitFrom">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, ref, unref } from 'vue'
import TextOverflow from '@/components/TextOverflow3.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllRoleApi, createRoleApi, modifyRoleApi, delRolerApi } from '@/api/modules/role'
import { getName } from "@/utils/toolFunction"
export default defineComponent({
  components: {TextOverflow},
  setup(){
    const state = reactive({
      // 角色列表
      roleList: [{
        id: 1,
        roleName: '超级超级超级超级超级超级超级超级超级管理员'
      },{
        id: 2,
        roleName: '超级管理员'
      },{
        id: 3,
        roleName: '年级组长'
      },{
        id: 4,
        roleName: '班主任'
      },{
        id: 5,
        roleName: '学生干部'
      },{
        id: 6,
        roleName: '普通学生'
      },{
        id: 7,
        roleName: '语文老师'
      },{
        id: 8,
        roleName: '数学老师'
      },{
        id: 9,
        roleName: '英语老师'
      },{
        id: 10,
        roleName: '生物老师'
      },{
        id: 11,
        roleName: '化学老师'
      },{
        id: 12,
        roleName: '物理老师'
      },{
        id: 13,
        roleName: '政治老师'
      },{
        id: 14,
        roleName: '历史老师'
      },{
        id: 15,
        roleName: '地理老师'
      },{
        id: 16,
        roleName: '音乐老师'
      },{
        id: 17,
        roleName: '科学老师'
      }],
      currentRoleId: null,
      currentRoleName: null,
      showDialog: false,
      isAdd: true,
      roleForm: {
        id: null,
        roleName: null
      },
      rules: {
        roleName:[
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { max: 20, message: "长度不能超过20个字符", trigger: "blur"},
        ]
      }
    })

    const ruleForm = ref(null);

    // 查询角色列表
    const queryRoleList = async()=> {
      const res:any = await getAllRoleApi();
      if(res.code == 0) {
        state.roleList.length = 0;
        res.data.forEach((item:any) => {
          state.roleList.push({
            id: item.id,
            roleName: item.roleName,
          })
        });
      }
    }

    // 创建角色
    const createRole = ()=> {
      state.showDialog = true;
      state.isAdd = true;
    }

    // 选中角色
    const clickItem = (item:any)=> {
      state.currentRoleId=item.id;
      state.currentRoleName = item.roleName
    }

    // 修改角色
    const modifyRole = (item:any)=> {
      state.showDialog = true;
      state.isAdd = false;
      nextTick(()=>{
        state.roleForm.id = item.id;
        state.roleForm.roleName = item.roleName;
      })
    }

    // 删除角色
    const deleteRole = (item)=> {
      ElMessageBox.confirm('此操作将永久删除该角色','确认删除',{
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      }).then(()=>{
        // 调用删除接口
        delRolerApi({id: item.id}).then((res:any)=>{
          if(res.code == 0) {
            ElMessage.success('删除成功');
            queryRoleList();
          }
        })
      }).catch(err=>{
        return err;
      })
    }

    // 关闭角色弹窗
    const handleClose = ()=> {
      ruleForm.value.resetFields();
    }

    // 提交角色表单
    const submitFrom = ()=> {
      const form = unref(ruleForm);
      if(!form) return;
      form.validate((valid:boolean)=>{
        if(valid) {
          if(state.isAdd) {
            // 添加接口
            createRoleApi({
              roleName: state.roleForm.roleName
            }).then((res:any)=>{
              if(res.code == 0) {
                ElMessage.success('添加成功');
                state.showDialog = false;
                queryRoleList();
              }
            })
          }else {
            // 修改接口
            modifyRoleApi({
              id: state.roleForm.id,
              roleName: state.roleForm.roleName
            }).then((res:any)=>{
              if(res.code == 0) {
                ElMessage.success('修改成功');
                state.showDialog = false;
                queryRoleList();
              }
            })
          }
        }
      })
    }

    // 权限保存
    const permissionSave = ()=> {
      if(!state.currentRoleId) {
        ElMessage.warning('请先选择角色')
      }
    }

    queryRoleList();

    return {
      ...toRefs(state),
      ruleForm,
      createRole,
      clickItem,
      modifyRole,
      deleteRole,
      handleClose,
      submitFrom,
      permissionSave
    }
  } 
})
</script>

<style lang="scss" scoped>
.role-permissions {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #ececec;
  .role-manage {
    width: 250px;
    flex-shrink: 0;
    margin-right: 8px;
    background-color: #fff;
    border-radius: 9px;
    .title {
      padding: 10px 16px;
      display: flex;
      border-bottom: 1px solid #ececec;
      justify-content: space-between;
      span {
        color: rgb(88, 88, 88);
        line-height: 32px;
      }
    }
    .role-list {
      height: calc(100% - 56px);
      padding-bottom: 10px;
      li {
        padding: 8px 16px;
        color: rgb(125, 125, 125);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ececec;
        .name {
          font-size: 14px;
          width: calc(100% - 52px);
        }
        .oper {
          visibility: hidden;
          width: 52px;
          padding-left: 4px;
          .oper-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-size: 100% 100%;
            cursor: pointer;
            font-size: 18px;
            &.modify-icon {
              opacity: 0.8;
              margin-right: 12px;
              &:hover {
                opacity: 1;
              }
            }
            &.delete-icon {
              opacity: 0.8;
              &:hover {
                opacity: 1;
              }
            }
          }
        }
        &:hover {
          background-color: #f4f4f4;
          .oper {
            visibility:visible;
          }
        }
        &.click-item {
          background-color: #e7e7e7;
          .name {
            color: #293038;
          }
          .oper {
            visibility:visible;
          }
        }
      }
    }
  }
  .permissions {
    flex: 1;
    min-width: 650px;
    background-color: #fff;
    border-radius: 9px;
    padding: 10px 20px;
    .title {
      display: flex;
      justify-content: space-between;
      line-height: 32px;
      span {
        color: rgb(88, 88, 88);
        .current-rolename {
          color: rgb(67, 133, 255);
        }
      }
    }
  }
}
.role-dialog {
  :deep(.el-dialog) {
    .el-dialog__header {
      padding: 0;
      height: 50px;
      background: rgba(64, 145, 253, 0.05);
      border-top: 1px solid transparent;
      .el-dialog__title {
        display: inline-block;
        margin-top: 16px;
        margin-left: 32px;
        font-weight: 500;
        color: #333;
        font-size: 16px;
      }
      .el-dialog__close {
        font-size: 18px;
        color: #333333;
      }
    }
    .el-dialog__footer {
      border-top: 1px solid #e8e8e8;
      height: 50px;
      padding-top: 9px;
      padding-right: 24px;
      padding-bottom: 9px;
      .el-button {
        width: 65px;
        height: 32px;
      }
    }
  }
}
</style>